<script setup lang="ts">
import type { HotItem } from '@/types/home.d.ts'
  import {getHomeHotAPI} from '@/services/home.ts'
   import {onMounted,ref} from 'vue'
    const HotPanelList=ref<HotItem[]>([])
    const GetHotPanelList=async()=>{
       const res=await getHomeHotAPI()
          console.log(res)
          HotPanelList.value=res.result
     }
     onMounted(async()=>{
           GetHotPanelList()
       })

//定义 props 接收数据
// defineProps<{
//   list: HotItem[]
// }>()
</script>
<template>
  <!-- 推荐专区 -->
    <view class="panel hot">
      <view class="item" v-for="item in HotPanelList" :key="item.id">
        <view class="title">
          <text class="title-text">{{ item.title }}</text>
          <text class="title-desc">{{ item.alt }}</text>
        </view>
        <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
          <image
            v-for="src in item.pictures"
            :key="src"
            class="image"
            mode="aspectFit"
            :src="src"
          ></image>
        </navigator>
      </view>
    </view>
</template>

<style lang="scss">
/* 热门推荐 */
.hot {
  display: flex;
  flex-wrap: wrap;
  min-height: 508rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;
    .title-desc {
      font-size: 24rpx;
      color: #7f7f7f;
      margin-left: 18rpx;
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 254rpx;
    border-right: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    .title {
      justify-content: start;
    }
    &:nth-child(2n) {
      border-right: 0 none;
    }
    &:nth-child(-n + 2) {
      border-top: 0 none;
    }
    .image {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .cards {
    flex: 1;
    padding: 15rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
